<template>
  <transition name="drawer">
    <div class="scorllBox" v-if="showDrawer">
      <div class="drawer">
        <div class="primary-retract" @click="setDrawer(false)" @mouseover="hidChidren">
          <span>收</span>
          <span>起</span>
          <span class="white"
            ><el-icon color="#409eff" size="10"><ArrowRight /></el-icon
          ></span>
        </div>
        <div class="drawer-content" v-loading="isLoading">
          <SEADetailLeft
            :value="listValue"
            :bigListValue="bigListValue"
            :idx="idx"
            :companyCid="companyCid"
            @refresh="refreshDetaill"
            ref="seadetaill"
          />
          <SEADetailRight :value="listValue" @refresh-detaill="refreshDetaill" />
        </div>
      </div>
    </div>
  </transition>
</template>

<script setup lang="ts">
import * as advanceApi from '@/api/ent/advanceSearch/index'
import { ArrowRight } from '@element-plus/icons-vue'
import SEADetailLeft from './SEADetailLeft.vue'
import SEADetailRight from './SEADetailRight.vue'
import { nodePageGet } from '@/api/ent/advanceSearch/index'

const seadetaill = ref(null)
const listValue = ref({})
const bigListValue = ref({})
const showDrawer = ref(false)
const isLoading = ref(false)
const isScrollbar = ref(true)
const idx = ref(0)
const companyCid = ref('')

const emit = defineEmits(['refreshVal'])

// 显示时数据
const GetDetaill = async (val) => {
  isLoading.value = true
  const res = await advanceApi.companyGetOne({ cid: val })
  res.menuList.forEach((element) => {
    if (element.field == 'baseInfo' && element.totalCount == 0) {
      element.totalCount = 1
      element.detailMenuVO.forEach((item) => {
        if (item.field == 'basicData' && item.totalCount == 0) {
          item.totalCount = 1
          return
        }
      })
      return
    }
  })
  listValue.value = res
  GetTotalData(res, val)
}
// 一个总的大数据  传给各个组件 通过field区分
const GetTotalData = async (res, cid) => {
  let menuList = res.menuList
  let arr = []
  menuList.forEach((item) => {
    arr = arr.concat(
      item.detailMenuVO.filter((items) => items.totalCount != 0).map((items) => items.field)
    )
  })
  let params = {
    pageNo: 1,
    pageSize: 10,
    cid: cid,
    nodes: arr
  }
  let result = await nodePageGet({ ...params })
  bigListValue.value = result
  isLoading.value = false
}

// 左、右侧领取企业 刷新 左、右侧数据/父级数据
const refreshDetaill = (data) => {
  listValue.value.receiveUser = data.receiveUser
  listValue.value.received = data.received
  // listValue.value.numberList = data.numberList
  Refresh(data)
}
// 显示/隐藏
const setDrawer = (val, cid, isIndex, index) => {
  showDrawer.value = val
  companyCid.value = cid
  if (val) GetDetaill(cid)
  if (isIndex) {
    idx.value = index
  } else {
    idx.value = 0
  }
}

// 刷新最外侧的列表
const Refresh = (data) => {
  emit('refreshVal', data)
}
defineExpose({ setDrawer })

const hidChidren = () => {
  seadetaill.value?.hidenChilden()
}
</script>

<style scoped lang="scss">
.scorllBox {
  position: fixed;
  bottom: -1px;
  right: 0;
  width: 1440px;
  height: calc(100% - 86px);
  overflow: hidden;
  z-index: 10;
  box-shadow: 5px 5px 5px #888888;
  .drawer {
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: flex;
    justify-content: flex-end;
    z-index: 999;
    $txtFontSize: 13px;
    .primary-retract {
      width: 40px;
      height: 80px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      cursor: pointer;
      background-color: #0052cc;
      color: #fff;
      border-radius: 4px 0 0 4px;
      margin-top: 20%;
      font-size: $txtFontSize;
      .white {
        width: 12px;
        height: 12px;
        text-align: center;
        line-height: 12px;
        border-radius: 50%;
        background-color: #fff;
        margin-top: 5px;
      }
    }
    :deep(.drawer-content) {
      width: 100%;
      background-color: #f5f7f9;
      box-shadow: 2px 0 8px rgba(0, 0, 0, 0.2);
      display: flex;
      height: 100%;
      overflow: hidden;
    }
  }
}
.drawer-enter-active,
.drawer-leave-active {
  transition: transform 0.8s ease-out;
}
.drawer-enter-from,
.drawer-leave-to {
  transform: translateX(100%);
}
</style>
